<template>
  <div class="bb-custom-wrapper picbook">
    <!-- 内容 -->
    <!-- 首页 -->
    <div id="bb-bookblock" v-show="contentShow" key="bg3" class="bb-bookblock main ">
      <div class="bb-item" v-for="(line,index) in words" :key="index">
        <Content id="content" :index="index" :line="line" @poemNextPage="poemNextPage" :picbookIndex="picbookIndex" :contentItem="contentItem"
          :isReset="isReset" :lineLength="lineLength"  @updateIsSwiper="updateIsSwiper" />
      </div>
    </div>
    <!-- 尾页 -->
    <Poem @poemAgain="poemAgain" v-if="endShow || beginShow" key="bg1" :poemContent="words" :lineLength="lineLength"
             @poemStart="poemStart" :beginShow="beginShow" :endShow="endShow"/>
  </div>
</template>

<script>
import { mixins } from "@/common/mixins/picbookMixins.js"
import Poem from './poem'
import Content from './content'
import { mapActions, mapGetters } from "vuex";
export default {
  mixins: [mixins],
  components: {
    Poem,
    Content
  },
  data() {
    return {
      contentShow: false,
      endShow: false,
      beginShow: true,
      wordCount: 0,
      isReset: false,   //是否重置
      lineLength: [],
      // doggerelWords: [
      //   "羞羞羞，刮猪油",
      //   "熬白菜，放酱油",
      //   "哭脸巴，油菜花",
      //   "打烂罐子热锅巴",
      //   "锅巴冇熟，哭一上轴",
      //   "锅巴熟哒，哭得有哒"
      // ]
    }
  },
  created() {
    const wordsMap = this.words.map(item => {
      return item.replace(/\s+/g,"").replace(/,/g,"，")   //去空  //英文的逗号变成中文的逗号
    })
    this.setWord(wordsMap)
    this.words.map(item =>{
      //假数据
      //   const itemLength = item.replace(/，/g,"").replace(/。/g,"").length
      //   this.lineLength.push(itemLength)

      item.split(/[，。]/g).filter(item => {return item.length > 0}).forEach(item =>{
        this.lineLength.push(item.length)
      })
      return [...item]
    })
  },
  methods: {
    poemStart: function () {
      this.beginShow = false
      setTimeout(() => {
        this.contentShow = true
      }, 500)
    },
    updateIsSwiper: function () {
      setTimeout(() => {
        this.isReset = false
        this.endShow = true
      }, 600)
    },
    poemNextPage: function () {
      this.book.bookblock('next')
    },
    poemAgain: function () {
      this.endShow = false
      this.isReset = true
      this.book.bookblock('first')
    },
    ...mapActions("wordStatus",["setWord"])
  },
  computed: {
    ...mapGetters("poemStatus", {
      poem: "getPoem"
    }),
    ...mapGetters("wordStatus", {
      words: 'getWord'
    })
  }
}
</script>

<style scoped lang='stylus'>
@import '../../../common/stylus/picbook.styl'
</style>
